<template>
    <div class="register">
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
            <h3 class="title">注册</h3>
            <el-form-item prop="username">
                <el-input
                        v-model="registerForm.username"
                        type="text"
                        auto-complete="off"
                        placeholder="账号"
                >
                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                        v-model="registerForm.password"
                        type="password"
                        auto-complete="off"
                        placeholder="密码"
                        @keyup.enter.native="handleRegister"
                >
                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                </el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
                <el-input
                        v-model="registerForm.confirmPassword"
                        type="password"
                        auto-complete="off"
                        placeholder="确认密码"
                        @keyup.enter.native="handleRegister"
                >
                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                </el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button
                        :loading="loading"
                        size="medium"
                        type="primary"
                        style="width:100%;"
                        @click.native.prevent="handleRegister"
                >
                    <span v-if="!loading">注 册</span>
                    <span v-else>注 册 中...</span>
                </el-button>
            </el-form-item>
        </el-form>
        <!--  底部  -->
        <div class="el-register-footer">
        </div>
    </div>
</template>

<script>
export default {
    name: "Register",
    data() {
        return {
            registerForm: {
                username: "",
                password: "",
                confirmPassword: ""
            },
            registerRules: {
                username: [
                    { required: true, trigger: "blur", message: "请输入您的账号" }
                ],
                password: [
                    { required: true, trigger: "blur", message: "请输入您的密码" }
                ],
                confirmPassword: [
                    { required: true, trigger: "blur", message: "请确认您的密码" },
                    { validator: this.validatePassword, trigger: "blur" }
                ]
            },
            loading: false
        };
    },
    methods: {
        validatePassword(rule, value, callback) {
            if (value !== this.registerForm.password) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        },
        handleRegister() {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    // 这里添加你的注册逻辑
                    this.$store.dispatch("Register", this.registerForm).then(() => {
                        this.$router.push({ path: "/login" }).catch(()=>{});
                    }).catch(() => {
                        this.loading = false;
                    });
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
